<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/wesite/view/common/base.jsp" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script type="text/javascript" src="${webctx}/script/aui-scroll.js"></script>
    <title>领取优惠券</title>
    <%@ include file="/wesite/view/common/common.jsp" %>

</head>

<style>
    .get-coupon-list {
        padding: 0 .8rem 2rem .8rem;
        font-family: "Microsoft YaHei";
    }

    .get-coupon-list li {
        position: relative;
        height: 5.33333rem;
        margin-top: .8rem;
        background-color: #fff;
    }

    .get-coupon-list li .arch-price {
        padding: 1.22667rem 1.06667rem 1rem 1.06667rem;
        font-size: .8rem;
        color: #555;
        line-height: 1.1;
    }

    .get-coupon-list li .arch-price > span {
        font-size: 1.6rem;
        font-weight: bold;
    }

    .get-coupon-list li .arch-msg {
        font-size: .746667rem;
        color: #555;
    }

    .get-coupon-list li .arch-msg p {
        max-width: 8.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .get-coupon-list li .arch-msg .msg-txt1 {
        font-size: .746667rem;
        color: #555;
        padding-top: .8rem;
    }

    .get-coupon-list li .arch-msg .msg-txt2 {
        font-size: .64rem;
        color: #ccc;
        padding-top: .53333rem;
    }

    .get-coupon-list li .arch-time {
        position: relative;
        left: 1.066667rem;
        font-size: .533333rem;
        color: #999;
    }

    .get-coupon-list li .arch-btn {
        position: relative;
        display: block;
        width: 3.2rem;
        height: 100%;
        text-align: center;
        background-color: #0daeff;
    }

    .get-coupon-list li .arch-btn span {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        width: .933333rem;
        text-align: center;
        font-size: .693333rem;
        color: #fff;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


</style>

<body>
<div class="get-coupon-list">
    <ul id="getCouponHtml">


    </ul>
    <div id="couponHolder" style=" margin: 10px 0; color: #999; text-align: center;display: none;"></div>
</div>
</body>
</html>

<script>
    var pno = 1;
    var loginUsable = false;
    function loginusable() {
        if (loginUsable) {
            return false;
        } else {
            loginUsable = true;
        }
        $("#couponHolder").text("正在加载 ...").show();
        $w.httpRequest({
            url: apiroot + "/we/home/getUsable",
            data: {"page_pno": pno},
            ok: function (ret) {
                loginUsable = false;
                var usable = ret.Data;
                var usableData = ret.Data.list;
                if (usable && usableData && usableData.length > 0) {
                    for (var i = 0; i < usableData.length; i++) {
                        var data = usableData[i];
                        var h = "";

                        h += " <li>";
                        h += "<div class ='fl'>";
                        h += "<div class ='arch-price fl'>￥<span>" + data.offermoney + "</span></div>";
                        h += "<div class='arch-msg fl'>";
                        h += "<p class='msg-txt1'>" + data.name + "</p>";
                        h += "<p class='msg-txt2'>" + data.explanation + "</p>";
                        h += "</div>";
                        h += "<div class='cl'></div>";
                        if (data.enddate && data.enddate.length > 19) {
                            data.startdate = data.startdate.substr(0, 16).replace(/[-]/g, "/");
                            data.enddate = data.enddate.substr(0, 16).replace(/[-]/g, "/");
                        }
                        h += "<div class='arch-time'>有效期 " + data.startdate + " - " + data.enddate + "</div>";
                        h += "</div>";
                        h += "<a class='arch-btn fr' href='javascript:;' onclick=' hide_li(this," + data.couponid + ")'><span>立即领取</span></a>";
                        h += "<div class='cl'></div>";
                        h += "</li>";
                        $("#getCouponHtml").append(h);


                    }
                    pno++;
                    $("#couponHolder").hide();
                } else {
                    pno = 0;
                    $("#couponHolder").text("已加载全部");
                }
            }
        })
    }

    $(function () {
        loginusable();
        var bottomHeight = parseInt($(".get-coupon-list").css("padding-bottom"));
        var scroll = new auiScroll({
            listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance: bottomHeight //判断到达底部的距离，isToBottom为true
        }, function (ret) {
            if (ret.isToBottom) {
                if (pno > 0) {
                    loginusable();
                }
            }
        });
    })


    var wid_rp = parseInt($(".get-coupon-list").css("padding-right")); // 获取边距
    var toast = new auiToast({});


    var flag = false;
    function hide_li(obj, id) {
        $(".arch-btn").attr("onclick", "");
        var li_v = $(obj).parents("li"); //获取点击所属的li
        var wid = li_v.outerWidth() + wid_rp; //计算偏移的距离

        $w.httpRequest({
            url: ctx + "/we/coupon/receive/" + id,
            ok: function (ret) {
                if (!ret.Data) {
                    li_v.animate({left: wid}, "slow", hide_li_sub); //偏移特效
                    setTimeout("setTime(" + id + ")", 1500);
                } else {
                    toast.success({
                        title: "领取成功",
                        duration: 1000
                    });
                    setTimeout("setTime(" + id + ")", 1500);
                }
            }, fall: function (ret) {
                toast.fall({
                    title: ret.MsgDesc,
                    duration: 1000
                });
            }


        });


        function hide_li_sub() { //li消失的函数
            li_v.hide();
        }
    }
    function setTime(id) {
        $('.arch-btn').attr('onclick', 'hide_li(this,' + id + ')');
    }

    function aaa() {

    }

</script>